import React, { Component, Fragment } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
var dataSources = [
  {
    title: '密保手机',
    name: 'phone'
  },
  {
    title: '电话归属',
    name: 'phonediqu'
  },
  {
    title: 'LOL大区',
    name: 'lol'
  },
  {
    title: '微博账号',
    name: 'wb'
  },
  {
    title: '微博UID',
    name: 'qqlm'
  },
];
export default class Lists extends Component {
  state = { listData: [] }
  componentDidMount = () => {
    this.ListData = PubSub.subscribe('ListData', (_, data) => {
      let dataList = []
      for (let i in data.ListData) {
        let o = {};
        o[i] = data.ListData[i];
        dataList.push(o)
      }
      dataList.splice(0, 2)
      for (let j = 0; j < dataList.length; j++) {
        dataList[j]["title"] = dataSources[j].title
        dataList[j]["name"] = dataSources[j].name
      }
      this.setState({ listData: [...dataList] })
    });
  }
  componentWillUnmount () {
    PubSub.unsubscribe(this.ListData)
  }
  render () {
    return (
      <Fragment>
        <div className="List">
          {
            (this.state.listData.length === 0 ? dataSources : this.state.listData).map((item, index) => {
              return (
                <div className="listContainer" key={index}>
                  <div className="listTitle">{item.title}</div>
                  <div className="listContent">{this.state.listData.length === 0 ? "暂无信息" : item[item.name]}</div>
                </div>
              )
            })
          }
        </div>
      </Fragment >
    )
  }
}
